<template>
  <div class="putout">
    <issue-component>
        <template v-slot:submit="propsItem">
            <div class="slot-button">
                <van-button round type="info" @click="submit(propsItem)" slot="button">
                    {{ $t("orders.put") }}
                </van-button>
            </div>
        </template>
    </issue-component>
  </div>
</template>

<script>
import issueOrder from 'components/content/order/issue-order/issue-order.vue';
import { Button } from 'vant';

export default {
    name: 'putout',
    components: {
        issueComponent: issueOrder,
        [Button.name]: Button
    },
    data () {
        return {
            noissue: true
        };
    },
    methods: {
        submit ({ orderInformation }) {
            const isEmpty = _.some(orderInformation, item => item === '' || (Array.isArray(item) && item.length === 0));
            if (isEmpty) {
                this.$util.failToast(this.$t('orders.mustHaveAll'));
            } else {
                const userPhone = { userPhone: this.$store.state.userInfo.telephone };
                // 将JSON转换成formData
                const formData = this.$util.jsonTransformData(Object.assign(orderInformation, userPhone));
                this.$api.orderApi.issue(formData)
                    .then(result => {
                        this.$util.successToast(result.message);
                        setTimeout(() => {
                            this.$router.replace({ name: 'index' });
                        }, 1300);
                    })
                    .catch(error => {
                        this.$util.failToast(error.message);
                    });
            }
        }
    },
    beforeRouteLeave (to, from, next) {
        if (to.path === '/profile' && this.noissue) {
            this.$dialog
                .confirm({ message: this.$t('orders.leave') })
                .then(() => {
                    next(true);
                })
                .catch(() => {
                    next(false);
                });
        } else {
            next(true);
        }
    }
};
</script>

<style scoped lang="less" src="./less/issue-order.less"></style>
